@import "var.scss";
@import "global.scss";

// 侧边栏进入动画的过渡效果
.aside-fade-enter-active {
  transition: all 0.3s ease;// 所有属性的过渡效果，持续 0.3 秒，使用 ease 缓动函数
}

// 侧边栏离开动画的过渡效果
.aside-fade-leave-active {
  transition: all 0.2s ease;// 所有属性的过渡效果，持续 0.2 秒，使用 ease 缓动函数
}

// 侧边栏进入时的初始状态和离开时的最终状态
.aside-fade-enter,
.aside-fade-leave-to {
  transform: translateX(10px); // 元素在 X 轴方向上向右偏移 10 像素
  opacity: 0; // 元素的透明度设为 0
}

// 当前播放区域的样式
.dingdong-current-play {
  font-size: 14px; // 字体大小设为 14 像素
  width: $current-play; // 宽度由变量 $current-play 决定
  position: fixed; // 固定定位，元素相对于视口固定位置
  right: 0; // 右边距为 0，紧贴视口右边缘
  top: $header-height; // 距离顶部的高度由变量 $header-height 决定
  bottom: 0; // 底边距为 0，紧贴视口底边缘
  padding-bottom: $footer-height; // 底部内边距由变量 $footer-height 决定
  z-index: 99; // 层叠顺序，确保在其他元素之上
  background-color: $color-white; // 背景颜色由变量 $color-white 决定
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4); // 设置阴影效果，1px 1px 的偏移，10px 的模糊半径，颜色为 rgba(0, 0, 0, 0.4)
  overflow: hidden; // 隐藏溢出的内容
}

// 标题、控制和菜单项的公共样式
.title,
.control,
.menus li {
  padding-left: 20px; // 左侧内边距设为 20 像素
  box-sizing: border-box; // 包括内边距和边框在内计算元素的总宽度和高度
}

// 标题的样式
.title {
  margin: 10px 0; // 上下外边距设为 10 像素
}

// 控制按钮的样式
.control {
  margin: 3px 0; // 上下外边距设为 3 像素
  color: $color-grey; // 文字颜色由变量 $color-grey 决定
}

// 菜单的样式
.menus {
  width: 100%; // 宽度设为 100% 父容器的宽度
  height: calc(100% - 19px); // 高度为 100% 减去 19 像素
  cursor: pointer; // 鼠标悬停时显示为指针
  z-index: 100; // 层叠顺序，确保在其他元素之上
  overflow: scroll; // 内容溢出时显示滚动条
  white-space: nowrap; // 不换行，内容保持在一行内
  li {
    display: block; // 列表项显示为块级元素
    width: 100%; // 宽度设为 100%
    height: 40px; // 高度设为 40 像素
    line-height: 40px; // 行高设为 40 像素，使文本垂直居中
    &:hover {
      background-color: $color-light-grey; // 鼠标悬停时背景颜色由变量 $color-light-grey 决定
    }
  }
}

// 播放状态的样式
.is-play {
  color: $color-black; // 文字颜色由变量 $color-black 决定
  font-weight: bold; // 字体加粗
}
